<template>
  <div class="all" ref="box">
    <div class="top">
      <header>
        <div class="div" @click="back">
          <img src="../../../assets/返回.png" alt="">
          <span class="solid">返回</span>
        </div>
        <div class="div">
          <span>团队工作站</span>
        </div>
        <div class="div"></div>
      </header>
      <van-search
        v-model="searchValue"
        shape="round"
        background="#fff"
        @clear="onSearch"
        @keyup="onSearch"
        placeholder="团队工作站名称/团队成员姓名/机构名称"
      />
      <div class="menu">
        <ul >
          <li v-for="(item, index) in modelMenu"
              :key="index"
              @click="topActive = item.index"
              :class="[topActive === item.index ? 'select' : '']"
          >{{item.name}}</li>
        </ul>
      </div>
      <van-dropdown-menu active-color="#1DA4F4" v-show="topActive === 2">
      <van-dropdown-item ref="item" :title="CityTitle" @change="onchange(0)" >
        <van-tree-select
          @click-nav="clickNav()"
          :items="items"
          :main-active-index.sync="activeIndex"
        >
          <template slot="content" >
            <ul class="right-content">
              <li v-for="(item,index) in policeList" :key="index"
                  @click="onItemClick(item.text)"> {{item.text}}
                <van-icon v-show="CityTitle == item.text" name="success" color="#1da4f2" />
              </li>
            </ul>
          </template>
        </van-tree-select>
      </van-dropdown-item>
      <van-dropdown-item :title="staffTypeTitle" v-model="staffType" @change="onchange(4)" :options="option5" />
      <van-dropdown-item :title="keshiTitle" v-model="DEPART" @change="onchange(1)" :options="option2" />
      <van-dropdown-item :title="gradeTitle" v-model="grade_id" @change="onchange(2)" :options="option3" />
<!--      <van-dropdown-item :title="doctorTitle" v-model="MAJOR" @change="onchange(3)" :options="option4" />-->
    </van-dropdown-menu>
    </div>
    <van-loading v-show="isLoading" size="24px" style="width: 100%;height: 80%;
    display:flex;align-items:center;justify-content:center; color: #1da4f2" vertical>
        加载中...
    </van-loading>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="doctorList.length <= 0 && isLoading === false"
      class="custom-image"
      :image="require('../../../assets/空两本书.png')"
      :description=" `暂无`+typeText+`团队工作站`"
    />
    <div class="box"
         @click="clickBox(item)"
         v-for="(item, index) in doctorList" :key="index">
      <div class="box_left">
        <img v-if="item.team_icon !== '' && item.team_icon !== undefined && item.team_icon !== null"
             :src="item.team_icon" class="PHOTO" alt="">
        <img v-else src="../../../assets/男医生@2x.png" class="PHOTO" alt="">
      </div>
      <div class="box_right">
        <ul>
          <li>
            <span class="name">
              {{item.team_name}}
              <a style="font-size: 13px;font-weight: 500">（{{item.count}}人）</a>
            </span>
            <button v-show="topActive == 1" class="btnXiangQing" @click.stop="quitTeam(item)">
              退出团队
            </button>
            <button v-show="topActive == 2 && Number(item.shenqing) != 1" class="btnXiangQing" @click.stop="insertTeam(item)">
              加入团队
            </button>
            <span v-show="Number(item.shenqing) === 1" style="color: #1da4f2">申请中</span>
          </li>
          <li>
            <span >团队长：{{item.NICK_NAME}}</span>
            &nbsp;
            &nbsp;
            <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
            <span>&nbsp;|&nbsp;</span>
            <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
<!--            <span>团队人数：{{item.count}}人</span>-->
          </li>
<!--          <li>-->
<!--            <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>-->
<!--            <span>|</span>-->
<!--            <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>-->
<!--          </li>-->
          <li>
            <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
            <button class="biaoqian">{{item.GRADE}}</button>
          </li>
        </ul>
<!--        <div class="box_rigth_bottom">
          <p>
            <a >接诊率:</a>
            <span v-if=" item.jiezhenCount!== undefined && item.jiezhenCount!== null && item.jiezhenCount!== ''">{{item.jiezhenCount}}</span>
            <span v-else>暂无</span>
            <a >好评率:</a>
            <span v-if=" item.haopingLv!== undefined && item.haopingLv!== null && item.haopingLv!== ''">{{item.haopingLv}}</span>
            <span v-else>暂无</span>
            <a >咨询量:</a>
            <span v-if=" item.zixunCount!== undefined && item.zixunCount!== null && item.zixunCount!== ''">{{item.zixunCount}}</span>
            <span v-else>暂无</span>
          </p>
          <p class="goodAt">
            <a style="display: block">擅长:</a>
            <span>{{item.team_goodat}}</span>
          </p>
          <p>
            <a >最快回复:</a>
            <span style="color: #1DA4F2"  v-if="item.min !== undefined && item.min !== null && item.min !== ''">{{item.min}}</span>
            <span v-else style="color: #999999">暂无</span>
            <a >平均回复:</a>
            <span style="color: #1DA4F2" v-if="item.avg !== undefined && item.avg !== null && item.avg !== ''">{{item.avg}}</span>
            <span style="color: #999999" v-else>暂无</span>
          </p>
        </div>-->
      </div>
    </div>
    <button class="keepBtn SendButton" @click="runBuild()" v-show="topActive == 0">我要创建团队</button>
    <van-popup v-model="insertShow" round position="bottom" :style="{ height: '80%', bottom: '50px' }" >
      <div class="popTitle">申请加入团队说明</div>
      <textarea class="textarea fontSize15" v-model="msg" placeholder="请填写申请加入团队说明" name="" id="" cols="30" rows="10"></textarea>
      <div class="popBottom">
        <button @click="insertShow = !insertShow">返回</button>
        <button class="SendButton" @click="ApplicationSubmission">申请提交</button>
      </div>
    </van-popup>
    <van-dialog v-model="quitShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认要退出团队吗？"
                @confirm="quitConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import area from '../../../components/China/area'
import city from '../../../components/China/TreeSelectCity'
import {Toast} from 'vant'

export default {
  name: 'TeamWorkstationList',
  data () {
    return {
      searchValue: '',
      userid: this.$route.query.userid,
      modelMenu: [
        {
          name: '我创建的',
          index: 0
        }, {
          name: '我加入的',
          index: 1
        }, {
          name: '我未加入的',
          index: 2
        }
      ],
      topActive: 0,
      CityTitle: '全国',
      keshiTitle: '科室选择',
      gradeTitle: '医院等级',
      doctorTitle: '职称',
      staffTypeTitle: '医生类型',
      PROVINCE: '',
      city: '',
      MAJOR: '', // 医生职称
      grade_id: '',
      DEPART: '', // 科室
      staffType: '', // 医生类型
      option1: [],
      option2: [],
      option3: [
        {text: '不限', value: ''},
        {
          text: '一甲',
          value: '一甲'
        }, {
          text: '一乙',
          value: '一乙'
        }, {
          text: '二甲',
          value: '二甲'
        }, {
          text: '二乙',
          value: '二乙'
        }, {
          text: '三甲',
          value: '三甲'
        }, {
          text: '三乙',
          value: '三乙'
        }, {
          text: '社区',
          value: '社区'
        }
      ],
      option4: [
        {text: '不限', value: ''},
        {text: '主任医师', value: '主任医师'},
        {text: '副主任医师', value: '副主任医师'},
        {text: '主治医师', value: '主治医师'},
        {text: '主管护理师', value: '主管护理师'}
      ],
      option5: [],
      policeList: [],
      areaList: area,
      items: city.children,
      activeIndex: 0,
      isLoading: true,
      page: 1,
      doctorList: [],
      isScroll: true,
      insertShow: false,
      msg: '',
      ITEM: [],
      quitShow: false
    }
  },
  beforeRouteEnter (to, from, next) {
    if (to.query.sys === 'IOS') {
      to.meta.isShowtabbar = false
    }
    next()
  },
  watch: {
    topActive: {
      handler (newName, oldName) {
        if (sessionStorage.getItem('topActive') !== null && sessionStorage.getItem('topActive') !== undefined && sessionStorage.getItem('topActive') !== '') {
          this.topActive = Number(sessionStorage.getItem('topActive'))
          sessionStorage.removeItem('topActive')
        } else if (newName !== oldName) {
          this.page = 1
          // 点击菜单
          this.topMenuOnchange()
        }
      },
      // 代表在wacth里声明了topActive这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
      immediate: true
    }
  },
  computed: {
    typeText: function () {
      if (this.topActive === 0) {
        return '我创建的'
      } else if (this.topActive === 1) {
        return '我加入的'
      } else if (this.topActive === 2) {
        return '我未加入的'
      }
    }
  },
  mounted () {
    // 判断是否隐藏下面tabBar
    let isShowtabbar = this.$route.query.isShowtabbar
    if (isShowtabbar) {
      sessionStorage.setItem('isShowtabbar', false)
    }
    let token = this.$route.query.token
    if (token) {
      sessionStorage.setItem('token', token)
    }
    let sys = this.$route.query.sys
    if (sys) {
      sessionStorage.setItem('sys', sys)
    }
    sessionStorage.removeItem('isErweimaShow')
    this.topMenuOnchange()
    window.addEventListener('scroll', this.scrollBottom, true)
    this.getData()
  },
  methods: {
    getData () {
      this.isLoading = true
      let city, MAJOR, grade_name, DEPART, staffType
      if (this.topActive == 2) { // 未加入 筛选
        if (this.city == '全国') {
          city = ''
        } else {
          city = this.city
        }
        MAJOR = this.MAJOR
        grade_name = this.grade_id
        DEPART = this.DEPART
        staffType = this.staffType
      } else {
        city = ''
        MAJOR = ''
        grade_name = ''
        DEPART = ''
        staffType = ''
      }
      // eslint-disable-next-line camelcase
      this.$http.TeamList({
        name: this.searchValue,
        page: this.page,
        team_type: Number(this.topActive) + 1,
        city: city,
        MAJOR: MAJOR,
        grade_name: grade_name,
        DEPART: DEPART,
        type: staffType
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            var _this = this
            if (Number(this.page) === 1) {
              this.doctorList = []
              this.doctorList = res.data.data
            }
            // 点击菜单
            if (this.doctorList.length <= 0) {
              this.topActive++
              if (this.topActive > 3) {
                this.topActive = 0
                this.page = 1
                this.getData()
              } else {
                this.getData()
              }
            }
            if (res.data.data.length > 0) {
              window.addEventListener('scroll', this.scrollBottom, true)
              this.isScroll = true
            } else {
              window.removeEventListener('scroll', this.scrollBottom, true)
              this.isScroll = false
            }
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    quitConfirm () {
      this.$http.exitTeam({team_id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            Toast('退出成功')
            this.topMenuOnchange()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    quitTeam (item) {
      this.ITEM = item
      this.quitShow = true
    },
    // 点击跳转团队主页
    clickBox (item) {
      if (this.topActive == 0 || this.topActive == 1) {
        this.$router.push({path: '/TeamHome', query: {id: item.id, userid: this.userid, topActive: this.topActive}})
      } else if (this.topActive == 2) {
        this.$router.push({path: '/LookTeamHome', query: {id: item.id, userid: this.userid, topActive: this.topActive}})
      }
    },
    // 提交申请
    ApplicationSubmission () {
      this.$http.createDocTeamRequest({team_id: this.ITEM.id, // 团队id列表可以取到
        doc_user_id: this.userid, // 申请医生ID
        msg: this.msg // 申请加入团队说明
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getFindTeamList()
            Toast('提交申请成功')
            this.msg = ''
            this.insertShow = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    insertTeam (item) {
      this.msg = ''
      this.ITEM = item
      this.insertShow = true
    },
    runBuild () {
      sessionStorage.removeItem('TeamData')
      this.$router.push({path: '/BuildTeam', query: {userid: this.userid}})
    },
    // 滚动事件
    scrollBottom () {
      let scrollTop = this.$refs.box.scrollTop
      let clientHeight = this.$refs.box.clientHeight
      let scrollHeight = this.$refs.box.scrollHeight
      if (scrollHeight - scrollTop <= clientHeight + 300 && this.isScroll === true) {
        this.isScroll = false
        setTimeout(() => {
          this.page += 1
          this.isLoading = true
          // 移除滚动事件
          window.removeEventListener('scroll', this.scrollBottom, true)
          // if (this.page == 1) {
          //
          // } else {
          this.getFindTeamList()
          // }
        }, 500)
      }
    },
    // 获取科室
    getKeShi () {
      // checkInspection/findKeShiZiDian
      this.$http.findKeShiZiDian({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.option2 = [
              {text: '不限', value: ''}
            ]
            var _this = this
            res.data.data.forEach(function (current, index, arr) {
              var obj = { text: current.name, value: current.name }
              _this.option2.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // // 获取医院等级
    // getHospotal () {
    //   this.$http.findHosptialGrade({})
    //     .then(res => {
    //       console.log(res)
    //       if (res.data.status === 'success') {
    //         this.option3 = [{text: '不限', value: ''}]
    //         var _this = this
    //         res.data.data.forEach(function (current, index, arr) {
    //           var obj = { text: current.GRADE, value: current.GRADE_ID }
    //           _this.option3.push(obj)
    //         })
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // },
    // 获取医生类型
    getDoctor_staffType () {
      this.$http.listByType({dict_type: 'staff_type'})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.option5 = [
              {text: '不限', value: ''}
            ]
            for (let i in res.data.data) {
              let obj = {
                text: res.data.data[i].dict_name, value: res.data.data[i].dict_value
              }
              this.option5.push(obj)
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 选择城市
    onItemClick (city) {
      this.city = city
      this.CityTitle = city
      this.$refs.item.toggle()
      this.page = 1
      this.getFindTeamList()
    },
    clickNav () {
      this.policeList = this.items[this.activeIndex].children
      this.PROVINCE = this.items[this.activeIndex].text
    },
    // 点击菜单
    topMenuOnchange () {
      this.page = 1
      this.getFindTeamList()
      if (this.topActive == 2) { // 未加入
        this.getKeShi()
        // this.getHospotal()
        this.getDoctor_staffType()
      }
    },
    onchange (index) {
      var _this = this
      // DEPART 科室选择  keshiTitle

      var Data
      // eslint-disable-next-line eqeqeq
      if (index == 1) {
        Data = this.option2.filter(function (item) {
          return item.value === _this.DEPART
        })
        if (Data[0].text === '不限') {
          this.keshiTitle = '科室选择'
        } else {
          this.keshiTitle = Data.text
        }
        // eslint-disable-next-line eqeqeq
      } else if (index == 2) {
        // grade_id 医院等级  gradeTitle
        Data = this.option3.filter(function (item) {
          return item.value === _this.grade_id
        })
        if (Data[0].text === '不限') {
          this.gradeTitle = '医院等级'
        } else {
          this.gradeTitle = Data.text
        }
        // eslint-disable-next-line eqeqeq
      } else if (index == 3) {
        // MAJOR 医生职称  doctorTitle
        Data = this.option4.filter(function (item) {
          return item.value === _this.MAJOR
        })
        if (Data[0].text === '不限') {
          this.doctorTitle = '职称'
        } else {
          this.doctorTitle = Data.text
        }
      } else if (index == 4) {
        // MAJOR 医生职称  doctorTitle
        Data = this.option5.filter(function (item) {
          return item.value === _this.staffType
        })
        if (Data[0].text === '不限') {
          this.staffTypeTitle = '医生类型'
        } else {
          this.staffTypeTitle = Data.text
        }
      }
      this.page = 1
      this.getFindTeamList()
    },
    // 搜索框搜索
    onSearch () {
      this.getFindTeamList()
    },
    // 我创建的团队列表
    getFindTeamList () {
      this.isLoading = true
      let city, MAJOR, grade_name, DEPART, staffType
      if (this.topActive == 2) { // 未加入 筛选
        if (this.city == '全国') {
          city = ''
        } else {
          city = this.city
        }
        MAJOR = this.MAJOR
        grade_name = this.grade_id
        DEPART = this.DEPART
        staffType = this.staffType
      } else {
        city = ''
        MAJOR = ''
        grade_name = ''
        DEPART = ''
        staffType = ''
      }
      // eslint-disable-next-line camelcase
      this.$http.TeamList({
        name: this.searchValue,
        page: this.page,
        team_type: Number(this.topActive) + 1,
        city: city,
        MAJOR: MAJOR,
        grade_name: grade_name,
        DEPART: DEPART,
        type: staffType
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            var _this = this
            if (Number(this.page) === 1) {
              this.doctorList = []
              this.doctorList = res.data.data
            } else {
              res.data.data.forEach(function (current, index, arr) {
                _this.doctorList.push(current)
              })
            }
            if (res.data.data.length > 0) {
              window.addEventListener('scroll', this.scrollBottom, true)
              this.isScroll = true
            } else {
              window.removeEventListener('scroll', this.scrollBottom, true)
              this.isScroll = false
            }
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      // this.$router.history.go(-1)
      let sys = this.$route.query.sys
      if (sys === 'IOS') {
        window.webkit.messageHandlers.backApp.postMessage(null)
      } else {
        window.history.back()
      }
    }
  },
  destroyed () {
    // 移除滚动事件
    window.removeEventListener('scroll', this.scrollBottom, true)
    sessionStorage.setItem('topActive', this.topActive)
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    overflow: auto;
  }
  .top{
    position: sticky;
    top: 0;
    z-index: 9;
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    background: white;
  }

  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
    font-size: 15px;
    font-weight: bold;
  }
  .div img{
    margin-right: 5px;
  }
  .div:nth-child(1) img{
    height: 13px;
    width: 7px;
    margin-left: 15px;
  }
  .div:nth-child(3) img{
    margin-right: 5px;
    width: 13px;
    height: 13px;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:nth-child(3){
    justify-content: flex-end;
  }
  .solid{
    color: #1DA4F2;
  }
  /* 搜索框*/
  /deep/ .van-search{
    padding: 5px 12px;
  }
  .menu{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    overflow-x: auto;
    background: white;
    /*margin-bottom: 5px;*/
    position: sticky;
    top: 12vw;
    z-index: 9999;
    border-bottom: 1px solid #E5E5E5;
  }
  .menu::-webkit-scrollbar{
    display: none;
  }
  .menu ul{
    /*width: auto;*/
    width: 98%; /* 可注释*/
    height: 29px;
    display: flex;
    align-items: center;
    /*margin-right: 20px;*/
    border-radius: 5px;
  }
  .menu ul li:first-child{
    border-radius: 5px 0 0 5px;
  }
  .menu ul li:nth-child(2) {
    border-right: none;
    border-left: none;
  }
  .menu ul li:last-child{
    border-radius: 0px 5px 5px 0px;
  }
  .menu ul li{
    width:200px;
    /*width:80px;*/
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1da4f2;
    border: 2px solid #1da4f2;
    /*background: rgba(29, 164, 242, 0.1);*/
  }
  .select{
    color: white !important;
    background: #1da4f2 !important;
  }
  /deep/ .right-content li{
    height: 47px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
  }
  /deep/ .van-sidebar-item--select::before{
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 16px;
    background-color: #1DA4F2;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    content: '';
  }

  .box{
    padding: 10px;
    box-sizing: border-box;
    background: white;
    margin-bottom: 8px;
    display: flex;
  }
  .all .box:last-of-type{
    margin-bottom: 60px;
  }
  .PHOTO{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
  }
  .box_left{
    width: 23%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
  }
  .dict_name{
    font-size: 11px;
    border: 1px solid #1DA4F2;
    border-radius: 2px;
    background: rgba(16, 184, 246, 0.1);
    color: #1da4f2;
    padding: 1px 3px;
    box-sizing: border-box;
    white-space: nowrap;
    /*margin-top: 10px;*/
  }
  .box_right{
    width: 78%;
  }
  .box_right ul{
    /*height: 60px;*/
    display: flex;
    flex-direction: column;
    align-content: space-around;
    justify-content: space-around;
  }
  .box_right ul li{
    display: flex;
    align-items: center;
    font-size: 13px;
    font-family: PingFang SC;
    min-height: 30px;
  }
  .box_right ul li:nth-child(1){
    justify-content: space-between;
  }
  .name{
    font-size: 15px!important;
    font-weight: bold;
    color: #333333;
  }
  .biaoqian{
    /*padding: 0px 8px;*/
    min-width: 44px;
    height: 18px;
    border-radius: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* background: rgba(29, 164, 242, 0.1); */
    background: transparent;
    color: #1DA4F2;
    /* border: none; */
    border: 1px solid;
    font-size: 11px;
    margin-left: 8px;
  }
  .btnXiangQing{
    color: white;
    background: #1DA4F2;
    border: none;
    padding: 3px 8px;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: 11px;
  }
  .btnXiangQing img{
    width: 5px;
    height: 9px;
    margin-left: 5px;
  }

  .btnXiangQing,
  .biaoqian,
  .jieShao
  {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .jieShao{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-right: 8px;
  }
  .box_rigth_bottom{
    margin-top: 5px;
  }
  .box_rigth_bottom p{
    margin-bottom: 5px;
  }
  .box_rigth_bottom p:nth-child(1),
  .box_rigth_bottom p:nth-child(3){
    font-size: 13px;
  }
  .box_rigth_bottom p a{
  }
  .box_rigth_bottom p span{
    color: #E3170D;
    margin: 0 8px 0 3px;
  }
  .goodAt{
    font-size: 13px;
    display: flex;
  }
  .goodAt a{
    display: block;
    white-space: nowrap;
  }
  .goodAt span{
    /*width: 80%;*/
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #333 !important;
  }
  .keepBtn{
    width: 92%;
    border-radius: 22px;
    border: none;
    margin: 10px 3%;
    position: absolute;
    bottom: 0;
  }
  .SendButton{
    height: 44px;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    color: #FFFFFF;
  }
  .popTitle,
  .keepBtn{
    font-size: 17px !important;
    font-weight: bold;
  }
  .popTitle,
  .popBottom {
    display: flex;
    align-items: center;
  }
  .popTitle{
    min-height: 60px;
    justify-content: center;
  }
  .popBottom{
    width: 92%;
    height: 60px;
    justify-content: space-around;
    position: relative;
    bottom: 0px;
    margin-left: 4%;
  }
  .textarea{
    width: 90%;
    resize: none;
    height: 75%;
    background: #FAF9FE;
    border: 1px solid #999999;
    border-radius: 10px;
    margin-left: 5%;
    padding: 10px;
    box-sizing: border-box;
  }

  .popBottom button{
    width: 45%;
    border-radius: 4px;
    min-height: 44px;
    border: none;
  }
  .popBottom button:nth-child(1) {
    border: 1px solid #1da4f2;
    background: transparent;
    color: #1da4f2;
  }
  .fontSize13{
    font-size: 13px;
  }
  .fontSize15{
    font-size: 15px;
  }
  /deep/ .van-dropdown-menu__bar{
    background-color: #E8F6FE;
    box-shadow: none;
    display: flex;
    justify-content: space-around;
    width: 100%;
    overflow-x: auto;
  }
  /deep/ .van-dropdown-menu__title::after{
    border-color: transparent transparent #333 #333;
  }
</style>
